import React from 'react';
import './index.less';
import { Button,Modal,Table,message } from 'antd';
import { connect } from 'umi';
import { ConnectState } from '@/models/connect';

const columnsList = [
    {
        title: 'id',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '媒体名称',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '收录类型',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '价格',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '操作',
        dataIndex: 'address',
        key: 'address',
        render: () => {
            return (<Button size='small'>删除</Button>)
        }
    },
]

class SelectModal extends React.Component{
    handelConfirm = () => {
        message.success('订单创建成功');
        this.props.onCancel()
    }
    render(): React.ReactNode{
        const {visible} = this.props;
        return (
            <>
                <Modal
                    visible={visible}
                    title="确认"
                    width={800}
                    footer={(<>
                        <span style={{float: 'left'}}>以选媒体3个，合计<span style={{color: '#ea7052'}}>1093.03</span>元</span>
                        <Button>刷新</Button>
                        <Button type="primary" onClick={() => this.handelConfirm()}>确认发稿</Button>
                    </>)}
                >
                    <Table dataSource={[]} columns={columnsList} pagination={false} size="small" />
                </Modal>
            </>
        )
    }
}

class Footerbar extends React.Component{
    state = {
        selectDialog: false
    }
    render(): React.ReactNode {
        const widths = this.props.collapsed ? 48 : 208;
        const {selectDialog} = this.state;
        return (<>
            <div className='ant-pro-footer-bar' style={{width: 'calc(100% - ' + widths + 'px)'}}>
                <div className='ant-pro-footer-bar-left'>

                </div>
                <div className='ant-pro-footer-bar-right'>
                    <Button>上一步：撰写稿件</Button>
                    <Button type="primary">查看已选媒体</Button>
                    <Button type="primary" danger onClick={() => this.setState({selectDialog: true})}>提交稿件</Button>
                    <span>以选媒体3个，合计<span style={{color: '#ea7052'}}>1093.03</span>元</span>
                </div>
            </div>
            <SelectModal visible={selectDialog} onCancel={() => this.setState({selectDialog: false})}/>
        </>)
    }
}

export default connect(({ global, settings }: ConnectState) => ({
    collapsed: global.collapsed
  }))(Footerbar);